<template >
  <div id="box">
    <MyTable :tableHead="table.tableHead" :tableData="table.tableData" @changeData="changeData"></MyTable>
  </div>
</template>
<script setup>
  import MyTable from "../components/MyTable" 
  import messageBox from "../components/MessageBox"
  import {onMounted, reactive} from "vue"
  const table = reactive({
    tableHead:[
      {label: "姓名", prop: "name"},
      {label: "语文", prop: "chinese"},
      {label: "数学", prop: "math"},
      {label: "英语", prop: "english"},
    ],
    tableData: [
      {name: "小明", chinese: 50, math: 60, english: 70},
      {name: "小王", chinese: 60, math: 70, english: 40},
      {name: "小红", chinese: 70, math: 40, english: 50},
      {name: "小白", chinese: 80, math: 30, english: 60},
    ]
  })

  const changeData = (data) => {
    const {prop,value,index} = data
    table.tableData[index][prop] = value
    messageBox.alert({
      content: "提交成功！"
    })
  }
  
  onMounted(_=>{

  })
</script>